Skip to main content

Stacked view

Showing multiple images in a grid is a common pattern for Product Detail Pages. This can be achieved by using multiple cylindo-viewer components, each with a different selected items.

Result
Loading...
Live Editor
function StackedView() {
  const Items = () => (
    <>
      <cylindo-360-frame frame="1" />
      <cylindo-360-frame frame="9" />
      <cylindo-360 frame="15" />
      <cylindo-studio customer-id="5098" code="RS-ELMO DOUBLE" />
      <cylindo-studio customer-id="5098" code="ALMSTAR STUDIO B" />
      <cylindo-model />
    </>
  );

  return (
    <div
      style={{
        display: "flex",
        gap: 10,
        flexWrap: "wrap",
      }}
    >
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "calc(50% - 5px)",
        }}
        default-item-index="0"
        controls="none"
      >
        <Items />
      </cylindo-viewer>
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "calc(50% - 5px)",
        }}
        controls="none"
        default-item-index="1"
      >
        <Items />
      </cylindo-viewer>
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "100%",
        }}
        controls="fullscreen"
        default-item-index="2"
      >
        <Items />
      </cylindo-viewer>
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "calc(50% - 5px)",
        }}
        controls="none"
        default-item-index="3"
      >
        <Items />
      </cylindo-viewer>
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "calc(50% - 5px)",
        }}
        controls="none"
        default-item-index="4"
      >
        <Items />
      </cylindo-viewer>
      <cylindo-viewer
        customer-id="5098"
        code="KINGBED PDP"
        style={{
          flex: "calc(50% - 5px)",
          background: "#f2f2f2",
        }}
        default-item-index="5"
      >
        <Items />
      </cylindo-viewer>
    </div>
  );
}
caveats

To avoid layout jumping and unnecessary repaints, the number of frames should be fixed in your initial HTML payload. If you try to render an image with an out-of-bounds default-item-index, the component will not render anything.